<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <script src="https://unpkg.com/axios@1.6.0/dist/axios.min.js"></script>
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <header>
        <h1 id="top">后台管理系统</h1>
        <nav>
            <ul>
                <li><a href="#">座位管理</a></li>
                <li><a href="#user-management">用户管理</a></li>
                <li><a href="#reservation-management">座位预约管理</a></li> <!-- 新增座位预约管理 -->
            </ul>
        </nav>
    </header>

    <main>
        <section class="seat-management">
            <h2>座位管理</h2>
            <!-- 展示座位列表、添加座位表单等 -->
        </section>

        <section class="reservation-management" id="reservation-management"> <!-- 添加预约管理模块 -->
            <h2>座位预约管理</h2>
            <!-- 展示座位预约申请列表 -->
            <ul class="reservation-list">
                <li>
                    <span>申请人姓名</span>
                    <span>预约座位号</span>
                    <button class="approve">通过</button>
                    <button class="reject">拒绝</button>
                    <button class="view-details">查看详情</button>
                </li>
            </ul>

            <!-- 查看座位预约人信息包括姓名，学号，邮箱，预约座位号，预约开始时间，预约时长，预约结束时间 -->
            <div class="reservation-details">
                <h3>预约申请详情</h3>
                <p>申请人姓名: <span id="applicant-name">张三</span></p>
                <!-- 添加其他预约信息 -->
                <p>申请人学号: <span id="applicant-id">2013413212</span></p>
                <p>申请人邮箱: <span id="applicant-email">1@email</span></p>
                <p>预约座位号: <span id="seat-id">座位1</span></p>
                <p>预约开始时间: <span id="start-time">2023 10-14</span></p>
                <p>预约时长: <span id="duration">2小时</span></p>
                <p>预约结束时间: <span id="end-time"></span></p>
                <button class="close-details">关闭</button>
            </div>
        </section>

        <section class="user-management" id="user-management">
            <h2 onclick="userView()">用户管理</h2>
            <!-- 展示用户列表、添加用户表单等 -->
            <div class="user-details">
                <div class="user-container">
                    <h3>账号：<span id="username">213123124</span></h3>
                    <p>用户名: <span id="user-name">张三</span></p>
                    <!-- 添加其他用户信息 -->
                    <p>用户学号: <span id="user-id">2013413212</span></p>
                    <p>用户专业：<span id="user-major">数媒</span></p>
                    <p>用户班级：<span id="user-class">数媒221</span></p>
                    <p>用户邮箱: <span id="user-email">1@email</span></p>
                    <button class="close-details">管理</button>
                </div>
            </div>
            <!-- 修改信息弹窗 -->
            <div id="myModal" class="modal">
                <div class="modal-content">
                    <div class="close-icon">
                        <h2>修改用户信息</h2>
                        <span class="close" onclick="closeModal()">&times;</span>
                    </div>

                    <form>
                        <div id="user_id"></div>
                        <div class="input">
                            <label for="username">账号:</label>
                            <input type="text" id="username" name="username">
                        </div>

                        <div class="input">
                            <label for="name">姓名:</label>
                            <input type="text" id="name" name="name">
                        </div>

                        <div class="input"><label for="studentID">学号:</label>
                            <input type="text" id="studentID" name="studentID">
                        </div>

                        <div class="input"><label for="major">专业:</label>
                            <input type="text" id="major" name="major">
                        </div>

                        <div class="input"><label for="class">班级:</label>
                            <input type="text" id="class" name="class">
                        </div>
                        <div class="input"><label for="email">邮箱:</label>
                            <input type="text" id="email" name="email">
                        </div>

                        <button type="button" onclick="saveChanges()">保存修改</button>
                    </form>
                </div>
            </div>

        </section>


        <!-- 返回顶部 -->
        <div id="back-to-top">
            <a href="#top"><i class="fa fa-sort-up fa-lg"></i></a>
        </div>
    </main>

    <footer>
        &copy; 2023 后台管理系统
    </footer>

    <script src="./js/reservationManagement.js"></script>
    <script src="./js/userManagement.js"></script>
</body>

</html>